
import { Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from 'react';
// import axios from '../../api/http';

function Index() {
  const nav = useNavigate();
  const [doctorInfo, setDoctorInfo] = useState<any>(null);
  const [scheduleList, setScheduleList] = useState<any[]>([]);
  const [recommendedDoctors, setRecommendedDoctors] = useState<any[]>([]);
  const [isFollowing, setIsFollowing] = useState(false);

  type ScheduleItem = {
    id: string;
    date: string;
    dayOfWeek: string;
    timeSlot: string;
    availableSlots: number;
    isToday: boolean;
    daysFromNow: number;
    isFullyBooked: boolean;
  }

  type Doctor = {
    id: string;
    name: string;
    title: string;
    avatar: string;
    rating: number;
    department: string;
    hospital: string;
    specialties: string;
    announcement: string;
    registrationFee: number;
  }

  const handleBack = () => {
    nav(-1);
  };

  const handleFollow = () => {
    setIsFollowing(!isFollowing);
  };

  const handleBookAppointment = (schedule: ScheduleItem) => {
    if (schedule.isFullyBooked) return;
    console.log('预约排班:', schedule);
    // 这里可以跳转到预约页面
    nav('/que')
  };

  const handleViewAllSchedules = () => {
    console.log('查看全部排班');
    
    
  };

  const handleViewMoreSpecialties = () => {
    console.log('查看更多擅长领域');
  };

  const handleRecommendedDoctor = (doctor: any) => {
    console.log('查看推荐医生:', doctor);
    nav(`/pai?doctorId=${doctor.id}`);
  };

  useEffect(() => {
    // 模拟获取医生信息
    const mockDoctorInfo: Doctor = {
      id: '1',
      name: '刘医生',
      title: '主任医师',
      avatar: 'https://via.placeholder.com/80x80/4A90E2/FFFFFF?text=刘',
      rating: 5.0,
      department: '门诊外一科',
      hospital: '四川省保健院南苑',
      specialties: '肛肠外科(肛肠良性基本),结直肠微创手术,熟悉结直肠肿瘤的外科及多学科综合治疗,主要从事结肠癌和直...',
      announcement: '晨1点自动放号,请合理安排挂号时间,谢',
      registrationFee: 20.00
    };

    const mockScheduleList: ScheduleItem[] = [
      {
        id: '1',
        date: '2020-01-27',
        dayOfWeek: '周一',
        timeSlot: '上午',
        availableSlots: 5,
        isToday: true,
        daysFromNow: 0,
        isFullyBooked: false
      },
      {
        id: '2',
        date: '2020-01-27',
        dayOfWeek: '周一',
        timeSlot: '下午',
        availableSlots: 15,
        isToday: true,
        daysFromNow: 0,
        isFullyBooked: false
      },
      {
        id: '3',
        date: '2020-01-28',
        dayOfWeek: '周二',
        timeSlot: '上午',
        availableSlots: 10,
        isToday: false,
        daysFromNow: 1,
        isFullyBooked: false
      },
      {
        id: '4',
        date: '2020-01-28',
        dayOfWeek: '周二',
        timeSlot: '下午',
        availableSlots: 0,
        isToday: false,
        daysFromNow: 1,
        isFullyBooked: true
      },
      {
        id: '5',
        date: '2020-01-29',
        dayOfWeek: '周三',
        timeSlot: '上午',
        availableSlots: 10,
        isToday: false,
        daysFromNow: 2,
        isFullyBooked: false
      }
    ];

    const mockRecommendedDoctors = [
      {
        id: '2',
        name: '杨医生',
        title: '副主任医师',
        avatar: 'https://via.placeholder.com/60x60/7ED321/FFFFFF?text=杨'
      },
      {
        id: '3',
        name: '章医生',
        title: '副主任医师',
        avatar: 'https://via.placeholder.com/60x60/F5A623/FFFFFF?text=章'
      }
    ];

    setDoctorInfo(mockDoctorInfo);
    setScheduleList(mockScheduleList);
    setRecommendedDoctors(mockRecommendedDoctors);
  }, []);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#fff' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
            医生排班
          </div>
        </div>
        
      </div>

      {/* 医生资料区域 */}
      {doctorInfo && (
        <div style={{ padding: '16px', background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
            {/* 医生头像 */}
            <img
              src={doctorInfo.avatar}
              alt="医生头像"
              style={{
                width: '80px',
                height: '80px',
                borderRadius: '50%',
                objectFit: 'cover'
              }}
            />

            {/* 医生信息 */}
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
                <div>
                  <div style={{ fontSize: '20px', fontWeight: 600, color: '#333', marginBottom: '4px' }}>
                    {doctorInfo.name}
                  </div>
                  <div style={{ fontSize: '14px', color: '#999' }}>
                    {doctorInfo.title}
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style={{ fontSize: '16px' }}>⭐</span>
                  <span style={{ fontSize: '16px', fontWeight: 600, color: '#333' }}>
                    {doctorInfo.rating}
                  </span>
                  <Button
                    size="small"
                    color="primary"
                    onClick={handleFollow}
                    style={{
                      borderRadius: '16px',
                      padding: '4px 12px',
                      fontSize: '12px'
                    }}
                  >
                    {isFollowing ? '已关注' : '关注'}
                  </Button>
                </div>
              </div>

              {/* 科室和医院 */}
              <div style={{ fontSize: '14px', color: '#333', marginBottom: '8px' }}>
                {doctorInfo.department} {doctorInfo.hospital}
              </div>

              {/* 擅长领域 */}
              <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>
                擅长: {doctorInfo.specialties}
                <span 
                  onClick={handleViewMoreSpecialties}
                  style={{ 
                    color: '#1677ff', 
                    cursor: 'pointer',
                    marginLeft: '4px'
                  }}
                >
                  更多
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 医生公告 */}
      {doctorInfo && (
        <div style={{ 
          padding: '12px 16px', 
          background: '#f8f9fa',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '16px' }}>📄</span>
            <span style={{ fontSize: '14px', fontWeight: 500, color: '#333' }}>
              医生公告
            </span>
          </div>
          <div style={{ 
            fontSize: '14px', 
            color: '#666', 
            marginTop: '4px',
            lineHeight: '1.4'
          }}>
            {doctorInfo.announcement}
          </div>
        </div>
      )}

      {/* 排班列表 */}
      <div style={{ padding: '16px', background: '#fff' }}>
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'space-between',
          marginBottom: '16px'
        }}>
          <div style={{ fontSize: '16px', fontWeight: 600, color: '#333' }}>
            {doctorInfo?.department}
          </div>
          <div style={{ fontSize: '14px', color: '#ff4d4f', fontWeight: 500 }}>
            挂号费: ¥{doctorInfo?.registrationFee?.toFixed(2)}
          </div>
        </div>

        {/* 排班项目列表 */}
        <div>
          {scheduleList.map((schedule) => (
            <div
              key={schedule.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '12px 0',
                borderBottom: '1px solid #f0f0f0'
              }}
            >
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: '16px', color: '#333', marginBottom: '4px' }}>
                  {schedule.date} {schedule.dayOfWeek} {schedule.timeSlot}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style={{
                    fontSize: '14px',
                    color: schedule.isFullyBooked ? '#999' : '#1677ff',
                    fontWeight: 500
                  }}>
                    {schedule.isFullyBooked ? '余0号' : `余${schedule.availableSlots}号`}
                  </span>
                  <span style={{
                    fontSize: '12px',
                    color: '#999',
                    background: '#f5f5f5',
                    padding: '2px 6px',
                    borderRadius: '4px'
                  }}>
                    {schedule.isToday ? '今日' : `${schedule.daysFromNow}天后`}
                  </span>
                </div>
              </div>
              <div>
                <Button
                  size="small"
                  color={schedule.isFullyBooked ? 'default' : 'primary'}
                  onClick={() => handleBookAppointment(schedule)}
                  disabled={schedule.isFullyBooked}
                  style={{
                    borderRadius: '16px',
                    padding: '6px 16px',
                    fontSize: '14px'
                  }}
                >
                  {schedule.isFullyBooked ? '已约满' : '预约'}
                </Button>
              </div>
            </div>
          ))}
        </div>

        {/* 全部排班链接 */}
        <div 
          onClick={handleViewAllSchedules}
          style={{
            textAlign: 'center',
            padding: '16px 0',
            color: '#1677ff',
            fontSize: '14px',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px'
          }}
        >
          全部排班
          <span style={{ fontSize: '12px' }}>▼</span>
        </div>
      </div>

      {/* 推荐医生 */}
      <div style={{ padding: '16px', background: '#fff' }}>
        <div style={{ 
          fontSize: '16px', 
          fontWeight: 600, 
          color: '#333',
          marginBottom: '12px'
        }}>
          同科室有号医生推荐
        </div>
        
        <div style={{ 
          display: 'flex', 
          gap: '12px',
          overflowX: 'auto',
          paddingBottom: '8px'
        }}>
          {recommendedDoctors.map((doctor) => (
            <div
              key={doctor.id}
              onClick={() => handleRecommendedDoctor(doctor)}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                minWidth: '80px',
                cursor: 'pointer'
              }}
            >
              <img
                src={doctor.avatar}
                alt={doctor.name}
                style={{
                  width: '60px',
                  height: '60px',
                  borderRadius: '50%',
                  objectFit: 'cover',
                  marginBottom: '8px'
                }}
              />
              <div style={{ fontSize: '14px', fontWeight: 600, color: '#333', textAlign: 'center' }}>
                {doctor.name}
              </div>
              <div style={{ fontSize: '12px', color: '#999', textAlign: 'center' }}>
                {doctor.title}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Index;
